<template>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="downOption"
		@down="downCallback">
		<view class="user-fans">
			<view class="header">
				<view class="m-l-20 m-r-20 m-t-10"><u-search v-model="keyword" class="m-b-20" shape="round" background="white" placeholder="请输入搜索关键词" @search="changeTab"
					@custom="changeTab" /></view>
				<view class="top-bar flex bg-white md m-t-20 m-l-10 m-r-10" v-if="distribution_reward_percentage>0">
					<!-- <view class="bar-item flex" :class="{'item-active': active == 'all'}" @tap="changeTab('all')">全部
					</view> -->
					<view class="flex-1 flex-col flex-nowrap col-center" @tap="changeTab('first')">
						<view class="bar-item flex m-b-10" :class="{'item-active': active == 'first'}">
							我的分销</view>
							<view class="flex-col row-center" style="width: 100%;">
								<view class="flex">
									<view class="flex flex-1 row-right">
										总额
									</view>
									<view class="" style="margin: 0 10rpx;">
										/
									</view>
									<view class="flex-1">
										结算
									</view>
									
								</view>
								
								<view class="flex">
									<price-format class="flex flex-1 row-right" weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
										:price="myTeamMoney" :color="active == 'first'?colorConfig.primary:colorConfig.normal" />
										<view class="" style="margin: 0 10rpx;">
											/
										</view>
									<price-format class="flex-1" weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
										:price="myTeamEarnings" :color="active == 'first'?colorConfig.primary:colorConfig.normal" />
								</view>
							</view>
						
					</view>
					<view class="flex-1 flex flex-wrap" v-if="showSecond" style="flex-direction: column;" @tap="changeTab('second')">
						<view class="bar-item flex m-b-10" :class="{'item-active': active == 'second'}">
						我孵化的分销</view>
						<view class="flex-col row-center" style="width: 100%;">
									<view class="flex">
										<view class="flex flex-1 row-right">
											总额
										</view>
										<view class="" style="margin: 0 10rpx;">
											/
										</view>
										<view class="flex-1">
											结算
										</view>
										
									</view>
									
									<view class="flex">
										<price-format class="flex flex-1 row-right" weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
											:price="myRecommendMoney" :color="active == 'second'?colorConfig.primary:colorConfig.normal" />
											<view class="" style="margin: 0 10rpx;">
												/
											</view>
										<price-format class="flex-1" weight="bold" :first-size="36" :subscript-size="26" :second-size="36"
											:price="myRecommendEarnings" :color="active == 'second'?colorConfig.primary:colorConfig.normal" />
									</view>
								
							
						</view>

						
					</view>
				</view>
				<view class="bg-white m-t-20 m-l-20">
					<u-subsection :list="list" @change="radioChange" button-color="#00632B" bg-color="#fff"
					active-color="#fff" ></u-subsection>
						<!-- <u-radio-group v-model="value" >
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in list" :key="index" active-color
								:name="item.name"
								:disabled="item.disabled"
								active-color="#00632B"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group> -->
					</view>
				<view class="sort-bar flex bg-white">
					<view class="sort-bar-item flex row-center" @tap="sortChange(0)">
						<view :class="sortType == 0 ? 'item-active' : ''">分销排序</view>
						<view class="arrow-icon flex-col col-center row-center">
							<u-icon name="arrow-up-fill"
								:color="fansSort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
							<u-icon name="arrow-down-fill"
								:color="fansSort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
						</view>
					</view>
					<view class="sort-bar-item flex row-center" @tap="sortChange(1)">
						<view :class="sortType == 1 ? 'item-active' : ''">金额排序</view>
						<view class="arrow-icon flex-col col-center row-center">
							<u-icon name="arrow-up-fill"
								:color="moneySort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
							<u-icon name="arrow-down-fill"
								:color="moneySort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
						</view>
					</view>
					<view class="sort-bar-item flex row-center" @tap="sortChange(2)">
						<view :class="sortType == 2 ? 'item-active' : ''">订单排序</view>
						<view class="arrow-icon flex-col col-center row-center">
							<u-icon name="arrow-up-fill"
								:color="orderSort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
							<u-icon name="arrow-down-fill"
								:color="orderSort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="card-box p-t-20">
					<view v-for="(item, index) in fansList" :key="index" class="card-item flex row-between bg-white p-20" @click="toDetail">
						<view class="flex flex-5">
							<u-image :src="item.avatar" border-radius="50%" width="100rpx" height="100rpx" />
							<view class="fans-info m-l-20">
								<view class="fans-name bold line-1">{{item.distribution_agent_name}}</view>
								<view class="flex lighter m-t-20">
									<view v-if="item.mobile" class="m-r-20">{{item.mobile}}</view>
									<view>{{item.create_time}}</view>
								</view>
							</view>
						</view>
						<view class="flex-col xs flex-2">
							<view class="msg"><span class="primary">{{item.count_user_num}} </span>人</view>
							<view class="m-t-5 msg"><span>{{item.count_order_num}} </span>单</view>
							<view class="m-t-5 msg">总额<span>{{item.total_price}} </span>元</view>
							<view class="m-t-5 msg">结算<span class="primary">{{item.total_earnings}} </span>元</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</mescroll-body>
</template>

<script>
	import {
		sortType,
	} from '@/utils/type';
	import {
		getUserFans,
		getUserFansOldData,
		teamList
	} from '@/api/user';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				distribution_reward_percentage:0,//是否开启团队分红比例
				upOption: {
					empty: {
						icon: '/static/images/order_null.png',
						tip: '暂无相关数据', // 提示
					}
				},
				active: 'first',
				sortType: -1,
				keyword: "",
				myTeamMoney:0,
				myTeamEarnings:0,
				myRecommendMoney:0,
				myRecommendEarnings:0,
				fansSort: sortType.NONE,
				moneySort: sortType.NONE,
				orderSort: sortType.NONE,
				fansList: [],
				showSecond: false,
				isSub: 0,
				type_id:0,
				date:"today",
				list: [
					{
						name: '今日',
						date:"today",
						disabled: false
					},
					{
						name: '昨日',
						date:"yesterday",
						disabled: false
					},
					{
						name: '本月',
						date:"this_month",
						disabled: false
					},
					{
						name: '上月',
						date:"last_month",
						disabled: false
					},
					{
						name: '全部',
						date:"all",
						disabled: false
					},
				],
					// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '今日',
			};
		},
		onLoad() {
			this.distribution_reward_percentage = this.appConfig.invite.distribution_reward_percentage >0 ? this.appConfig.invite.distribution_reward_percentage : 0;
			this.type_id=this.$Route.query.type_id
			this.getUserFansMoneyFun()
		},
		methods: {
			onRefresh() {
				this.fansList = []
				this.mescroll.resetUpScroll();
			},
			radioChange(index){
				this.date=this.list[index].date
				console.log('this.date',this.date)
				this.onRefresh()
			},
			// 上拉加载 
			upCallback(page) {
				const {
					fansSort,
					moneySort,
					orderSort,
					active,
					keyword,
					isSub,
					date
				} = this;
				const params = {
					keyword,
					fans: fansSort,
					money: moneySort,
					order: orderSort,
					page_size: page.size,
					page_no: page.num,
					is_sub:isSub,
					date:date
				};
				teamList(params).then(({
					data
				}) => {
					if (data.total.is_sub==1) {
						console.log(111111111111)
						this.myRecommendMoney=data.total.total_price;
						this.myRecommendEarnings=data.total.total_earnings;
						
					} else{
						this.myTeamMoney=data.total.total_price;
						this.myTeamEarnings=data.total.total_earnings;
					}
					if (page.num == 1) this.fansList = [];
					const curPageData = data.lists;
					const curPageLen = curPageData.length;
					const hasNext = !!data.more;
					this.fansList = this.fansList.concat(curPageData);
					this.mescroll.endSuccess(curPageLen, hasNext);
				}).catch(() => {
					this.mescroll.endErr()
				})
			},
			
			getUserFansMoneyFun(){
				const params={
					page_size: 10,
					page_no: 1,
					is_sub:1
				}
				this.getUserFansOldDataFun(teamList,params)
			},
			toDetail(){
					uni.navigateTo({
						url: "bundle/pages/user_spread_order/user_spread_order?level=2&date='today'"
					});
			},
			getUserFansOldDataFun(fun,params){
					fun(params).then(({
						data
					}) => {
							this.myRecommendMoney=data.total.total_price;
							this.myRecommendEarnings=data.total.total_earnings;
							data.lists.length==0?this.showSecond=false:this.showSecond=true
							console.log('this.myRecommendMoney',this.myRecommendMoney)
					}).catch(() => {
					})
			},
			
			
			
			changeTab(val) {
				console.log('valllllll',val)
				this.active = val
				val=='first'?this.isSub=0:this.isSub=1
				this.onRefresh()
			},

			// 排序状态变化 
			sortChange(type) {
				let {
					fansSort,
					moneySort,
					orderSort
				} = this;

				this.sortType = parseInt(type)

				switch (this.sortType) {
					case 0:
						// 分销排序
						if (fansSort == sortType.DESC || fansSort == sortType.NONE) {
							this.fansSort = sortType.ASC;
							this.moneySort = sortType.NONE
							this.orderSort = sortType.NONE
						} else if (fansSort == sortType.ASC) {
							this.fansSort = sortType.DESC;
							this.moneySort = sortType.NONE;
							this.orderSort = sortType.NONE;
						}
						break;

					case 1:
						// 金额排序
						if (moneySort == sortType.DESC || moneySort == sortType.NONE) {
							this.moneySort = sortType.ASC;
							this.fansSort = sortType.NONE;
							this.orderSort = sortType.NONE
						} else if (moneySort == sortType.ASC) {
							this.moneySort = sortType.DESC;
							this.fansSort = sortType.NONE;
							this.orderSort = sortType.NONE;
						}

						break;
					case 2:
						// 订单排序
						if (orderSort == sortType.DESC || orderSort == sortType.NONE) {
							this.orderSort = sortType.ASC;
							this.moneySort = sortType.NONE;
							this.fansSort = sortType.NONE;
						} else if (orderSort == sortType.ASC) {
							this.orderSort = sortType.DESC;
							this.moneySort = sortType.NONE;
							this.fansSort = sortType.NONE;
						}

						break;
				}

				this.onRefresh()
			}
		}
	};
</script>
<style lang="scss">
	.user-fans {
		.header {
			.top-bar {
				padding: 18rpx 50rpx;
				height: 160rpx;

				.bar-item {
					flex: 1;
					padding: 0 30rpx;
					height: 58rpx;

					&:not(:last-of-type) {
						//margin-right: 54rpx;
					}
				}

				.item-active {
					color: white;
					background-color: $-color-primary;
					border-radius: 10rpx;
				}
			}

			.sort-bar {
				height: 80rpx;

				.sort-bar-item {
					flex: 1;

					.arrow-icon {
						transform: scale(0.36);
					}

					.item-active {
						color: $-color-primary;
					}
				}
			}
		}
	}

	.content {
		.card-box {
			.card-item {
				.fans-name {
					
				}
				&:not(:last-of-type) {
					border-bottom: $-solid-border;
				}
			}
		}
	}
</style>
